<template>
  <div>
    <!--
      el-upload 组件库提供的一个上传图片的组件 不是特别好用 二次封装
        1. list-type 控制组件的样式  照片墙
        2. action  指定将来上传的图片服务器的地址
            el-upload 组件能自动帮你将图片上传到指定的服务器
            将来我们需要自己手动上传!! 不需要自动上传
            action="" 只是为了不报错 但是还是会发请求
        3. file-list  指定默认展示的图片列表 必须是数组 [{}]
        4. on-preview 传个函数 在点击预览的+号时触发
        5. limit 控制最大上传数量
        6. on-remove 传个函数 点击删除时触发
        7. http-request 传个函数 覆盖默认的上传行为, 就不会自动发送请求了
        8. on-change 传个函数 添加文件触发这个函数
        9. before-upload 传个函数 上传之前执行 通常用于文件校验
            返回false 表示上传失败; 反之成功
     -->
    <el-upload
      :class="{ disabled: flag }"
      :limit="count"
      list-type="picture-card"
      action=""
      :file-list="fileList"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :on-change="handleChange"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>

    <!-- <el-progress style="width: 300px" :text-inside="true" :stroke-width="26" :percentage="percent" /> -->

    <!-- 放一个预览照片的弹窗 -->
    <el-dialog title="预览照片" :visible="isShow" width="500px" @close="isShow = false">
      <img :src="imgSrc" alt="" style="width: 100%;">
    </el-dialog>
  </div>
</template>

<script>
// 发请求到接口服务器
// 1. 下载axios  yarn add axios
// 2. 导入axios  import axios from 'axios'
// 3. 创建axios实例  const request = axios.create({})
// 4. 请求 request({ method: 'post', ... })

// 发请求到图片服务器(存储桶)
// 1. 下载    yarn add cos-js-sdk-v5
// 2. 导入
import COS from 'cos-js-sdk-v5'
// 3. 创建COS实例(将图片上传到存储桶-公有读私有写)
const cos = new COS({
  // 配置COS是为了将来请求时知道是谁在发请求
  // 身份信息:
  SecretId: 'AKIDJgofFpfVUQ9C0Xr5Xjd6ID4B8oFPLxLT', // 身份识别ID
  SecretKey: 'WnsjKjslM8dtrbB6lciUzDBwSnxHI2Vh' // 身份秘钥
})
// 4. 利用cos请求
// cos.putObject

export default {
  props: {
    count: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      fileList: [
        // {
        //   url: 'https://img0.baidu.com/it/u=3905825772,3024012927&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1678381200&t=293ffc96a952ce211696e49b7964fb13'
        // },
        // {
        //   url: 'https://img2.baidu.com/it/u=2421090168,324781765&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1678381200&t=2b91a50a077f0a284a40f8935a7d3ea9'
        // }
      ],
      isShow: false,
      imgSrc: ''
      // percent: 0
      // flag: false
    }
  },
  computed: {
    flag() {
      return this.fileList.length >= this.count
    },
    isAllUpload() {
      return this.fileList.every(item => item.status === 'success')
    }
  },
  methods: {
    handlePreview(file) {
      // console.log('我要预览了', file.url)
      this.imgSrc = file.url
      this.isShow = true
    },
    handleRemove(file, fileList) {
      // file 被删的文件对象
      // fileList 结构中的图片列表数据
      // this.fileList 我们自己提供的图片列表数据
      // console.log('我要被删了', file)
      // 方式一:
      this.fileList = [...fileList] // 最好还是展开 保持数据彼此独立 不互相影响

      // 方式二:
      // this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    },
    handleUpload(obj) {
      // 注意: 展示的图片仅仅只是临时预览, 一会还得上传
      // obj.file 用于上传的文件对象
      // console.log('我要上传了...', obj.file)
      const uid = obj.file.uid
      const target = this.fileList.find(item => item.uid === uid)
      target.status = 'uploading' // 开启自己的进度条
      // 我需要自己手动请求上传图片 到存储桶
      // 不支持promise!!! 回调
      cos.putObject({
        Bucket: 'hrsaas-106-1304657626', // 存储桶的名字
        Region: 'ap-shanghai', // 中国上海 // 存储桶所在的地域
        Key: parseInt(Math.random() * 999999) + obj.file.name, // 将来上传到存储桶中的键名 可以理解为文件名  1.jpg  1.jpg
        Body: obj.file, // 要上传的文件对象
        // 图片每上传一丢丢 就会执行一次
        onProgress: (progressData) => {
          // this => 组件
          // console.log(JSON.stringify(progressData))
          // this.percent = parseInt(progressData.percent * 100)
          target.percentage = parseInt(progressData.percent * 100)
        }
      }, (err, data) => {
        // 这个函数将来会在请求结束(成功了/失败了)以后执行
        // console.log('请求结束了')
        // console.log(err || data)
        if (err) {
          console.log(err)
          return
        }

        // this => 组件实例
        // console.log(data)
        target.url = 'https://' + data.Location // 图片上传成功后 使用真地址替换临时假地址
        target.status = 'success' // 将图片状态改成成功 打个钩
      })
    },
    handleChange(file, fileList) {
      // file 添加的图片文件
      // fileList 结构中的图片列表
      // this.fileList 数据中的图片列表
      console.log('添加文件了', file, fileList, this.fileList)
      this.fileList = [...fileList]
    },
    beforeUpload(file) {
      // console.log('我要校验了', file)
      const flag = file.size / 1024 / 1024 < 2

      if (!flag) {
        // 停止上传...
        this.$message.error('仅支持上传1M以内的图片')
        return false
      }

      return true
    }
  }
}
</script>

<style lang='scss' scoped>
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      // 虚线的上传盒子
      display: none;
    }
  }
}

</style>
